<template>
  <ScrollView orientation='vertical'>
    <StackLayout class="root">
      <Image class="banner" src="~/images/home-banner.jpg"/>
      <GridLayout columns="auto, *, auto" class="balance-area" @tap="goToWallet">
        <Image col="0" class="wallet" src="~/images/wallet_highlight.png"/>
        <StackLayout col="1" class="balance-text">
          <Label class="balance-main" text="My Wallet"/>
          <Label class="balance-alt" :text="!hasLogin?'Login to view':`${btcValuation.toFixed(6)} BTC ≈ ${usdValuation.toFixed(6)} USD`"/>
        </StackLayout>
        <Button col="2" v-if="!hasLogin" class="login-btn func-btn" text="Login" @tap="onLogin"/>
      </GridLayout>
      <StackLayout class="list-area">
        <GridLayout class="list-header">
          <!-- <Label :class="'left-tab ' + (isLeftTab? 'active': '')" text="Top Gainers" @tap="leftBtnTap" /> -->
          <!-- <Label :class="'right-tab ' + (isLeftTab? '': 'active')" text="Newest Coin" @tap="rightBtnTap"/> -->
          <label ref="label" class="left-tab" text="Top Gainers" verticalAlignment="center"/>
        </GridLayout>
        <StackLayout v-for="(item, index) in topGainers" :class="'cell ' + shouldHighlight(index)" orientation="horizontal" v-bind:key="index" @tap="onItemClick(item.title, index)">
          <GridLayout columns="auto, auto, *, auto" rows="auto, auto" verticalAlignment="center">
            <Label class="num" :text="index + 1" col="0" row="0"/>
            <Label class="cell-title" :text="item.title" col="1" row="0" />
            <Label class="cell-alt" :text="item.alt" col="1" row="1"/>
            <Label class="cell-title2" :text="item.title2" col="2" row="0"/>
            <Label class="cell-alt2" :text="item.alt2" col="2" row="1"/>
            <Button :class="'cell-btn ' +  listItemButtonClass(item.btn)" :text="item.btn" col="3" row="0" rowSpan="2"/>
          </GridLayout>
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </ScrollView>
</template>
<script>
import Login from './login/Login'
import PButton from './common/PButton'
import {dataBus} from '~/business/DataBus'
import Chart from '~/components/common/Chart'
import { platform } from 'os';

require( "nativescript-localstorage" )
export default {
  data() {
    return {
      isLeftTab: true,
      hasLogin: false,
      btcValuation: 0,
      usdValuation: 0,
      clickIndex: -1,
    }
  },
  props: ['topGainers'],
  methods: {
    onLogin() {
      this.$navigateTo(Login);
      let self = this
      dataBus.loginBack = () => {
        self.hasLogin = !!localStorage.getItem('token')
        dataBus.loadWallet({
          onSuccess: ret => {
            self.btcValuation = ret.btcValuation
            self.usdValuation = ret.usdValuation
          }
        })
      }
    },
    leftBtnTap() {
      this.isLeftTab = true
      //this.listData = this.topGainers
    },
    rightBtnTap() {
      this.isLeftTab = false
      this.listData = this.newestCoins
    },
    onItemClick(title, index) {
      this.clickIndex = index
      let self = this
      setTimeout(function() {
        self.clickIndex = -1
        self.$navigateTo(Chart, {
          props: {
            pair: title,
          }
        })
      }, 100)
    },
    onScroll(event) {

    },
    goToWallet() {
      dataBus.changeAppIndex(0)
    },
    listItemButtonClass(content) {
      return content.indexOf('-') == 0 ? 'item-down': 'item-up' 
    },
    shouldHighlight(index) {
      if (index == this.clickIndex) {
        return 'cell-highlighted'
      } else {
        return ''
      }
    }
  },
  components: {
    'p-button':PButton
  }, 
  mounted() {
    //this.listData = this.topGainers
    this.hasLogin = !!localStorage.getItem('token')
    console.log(localStorage.getItem('token'))
    if (this.hasLogin) {
      const self = this
      dataBus.loadWallet({
        onSuccess: ret => {
          self.btcValuation = ret.btcValuation
          self.usdValuation = ret.usdValuation
        }
      })
    }
  }
}
</script>

<style scoped>
  .root {
    background: #15283F;
    height: auto;
  }
  .banner {
    width: 100%;
  }
  .balance-area {
    width: 100%;
    height: 100;
    background: linear-gradient(to right, #1C344F, #074C76);
  }
  .wallet {
    margin-left: 14;
    width: 36;
    height: 36;
  }
  .balance-text {
    margin-left: 17;
    padding-left: 13;
    border-left-color: #21638B;
    border-left-width: 1;
    padding-top: 14;
    padding-bottom: 14;
    height: 75;
  }
  .balance-main {
    color: white;
    font-size: 20;
    font-family: "PingFangSC-Medium";
  }
  .balance-alt {
    color:#efefef;
    font-size: 14;
    font-family: "PingFangSC-Light";
  }
  .login-btn {
    width: 100;
    height: 30;
    margin-right: 12;
    border-radius: 15;
    font-size: 18;
  }
  .list-area {
    background: #1C344F;
    margin-top: 10;
    width: 100%;
  }
  .list-header {
    height: 50;
    width: 100%;
    border-bottom-width: 1;
    border-bottom-color: #274867;
  }
  .left-tab, .right-tab {
    color: white;
    font-size: 16;
    font-family: 'PingFangSC-Medium';
  }
  .left-tab {
    margin-left: 13;
    margin-right: 39;
  }
  .active {
    color: #01ECF4;
    border-bottom-width: 1;
    border-bottom-color: #01ECF4;
  }
  .cell {
    height: 75;
    width: 100%;
    border-bottom-width: 1;
    border-bottom-color: #274867;
  }
  .num {
    background-color: #01ECF4;
    width: 13;
    height: 13;
    padding-left: 3;
    margin-left: 12;
    color: #203956;
    font-size: 12;
    line-height: 13;
  }
  .cell-title, .cell-title2 {
    color: white;
    font-size: 14;
    font-family: "PingFangSC-Medium";
  }
  .cell-title, .cell-alt {
    margin-left: 10;
  }
  .cell-title2, .cell-alt2 {
    margin-left: 26;
  }
  .cell-alt, .cell-alt2 {
    color: #6292BE;
    font-size: 12;
    font-family: "PingFangSC-Regular";
    margin-top: 3;
  }
  .cell-btn {
    background: #00CE7D;
    width: 100;
    height: 30;
    border-radius: 2;
    color: white;
    margin-right: 12;
    font-size: 14;
  }
  button {
    padding: 0;
  }
  .list {
    background-color: transparent;
    height: 225;
    separator-color: transparent;
    highlighted-color: transparent;
  }
  .item-up {
    background: #00CE7D;
  }
  .item-down {
    background: #E55541;
  }
</style>

